<template>
  <view class="detail-wrap">
    <view class="swiper-wrap">
      <u-swiper class="titck-swiper" :list="imgArr"></u-swiper>
    </view>

    <view class="price-floor">
      <view class="title">{{ ticketInfo.template_title }}</view>
      <view class="desc">{{ ticketInfo.template_desc }}</view>
      <view class="price-box">
        <text class="unit">￥</text>
        <view class="price">{{ ticketInfo.ticket_price / 100 }}</view>
      </view>
    </view>

    <view class="times-wrap">
      <view class="times-box">
        <view class="ticket-detail-name"
          >剩余次数：{{ ticketInfo.ticket_times }}次</view
        >
        <u-button
          class="prebook"
          size="mini"
          type="primary"
          v-show="show"
          @click="handleShowCalendar"
          >预约</u-button
        >
      </view>

      <!-- 日历 -->
      <u-calendar
        :show="showCalenDar"
        color="#d5ad57"
        :mode="mode"
        :minDate="ticketInfo.start_date"
        :maxDate="ticketInfo.end_date"
        :closeOnClickOverlay="true"
        :monthNum="monthNum"
        @close="handleCalendarClose"
        @confirm="handleConfirm"
      ></u-calendar>
      <view class="item-desc"
        >有限期：{{ ticketInfo.start_date }}-{{ ticketInfo.end_date }}</view
      >
      <view class="item-desc"
        >时段：{{ ticketInfo.start_time }}-{{ ticketInfo.end_time }}</view
      >
      <view class="ticket-detail-title-desc"
        >购买后请及时前往前台进行人脸识别核销。</view
      >
    </view>
    <!-- 场次 -->
    <view class="sessions">
      <view class="sessions-title">选择场次</view>
      <view
        class="sessions-con"
        v-for="item in sessions"
        :key="item.session_id"
      >
        <view class="item" @click="selectSessions(item)"
          >{{ item.start_time }}至{{ item.end_time }}</view
        >
        <!-- <view class="price">{{item.ticket_price /100}} 元</view> -->
      </view>
    </view>

    <!--  <view class="ticket-detail-comment-wrap">
      <view class="ticket-detail-comment-item">使用说明:</view>
      <view class="ticket-detail-comment-item"
        >1、本卡不记名使用，购买成功后请前往前台扫核销码入场;</view
      >
      <view class="ticket-detail-comment-item"
        >2、有效期从办卡日起，在游泳馆开放时间内使用，闭馆时间以通知为准;</view
      >
      <view class="ticket-detail-comment-item">3、使用时间:16:00-22: 00;</view>
      <view class="ticket-detail-comment-item"
        >4、由于天气影响等非主观原因暂停开放的不延期;</view
      >
      <view class="ticket-detail-comment-item"
        >5、本卡办理成功后，支持退费;</view
      >
      <view class="ticket-detail-comment-item"
        >6、本卡当年有效，请在有效期内使用，逾期无效;</view
      >
      <view class="ticket-detail-comment-item"
        >7、在法律范围内本场馆保留最终解释权。</view
      >
    </view> -->

    <view class="ticket-detail-btn-wrap">
      <view class="ticket-detail-btn" @tap="handleBuy">购买</view>
    </view>
  </view>
</template>

<script>
import { request, requestData } from '@/utils/http.js'
export default {
  name: 'ticketDetail',
  data() {
    return {
      site_code: '',
      template_id: '',
      ticketInfo: {},
      sessions: [],
      session_id: '',
      ticket_price: '',
      imgArr: [
        'https://ya30images.hbwlife.com/site/17001-ticket-1.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
      ],
      show: false,
      showCalenDar: false,
      mode: 'single',
      specified_date: '',
      monthNum: 3,
    }
  },
  onLoad(option) {
    if (option && option.id) {
      console.log(option.id)
      this.site_code = option.id
    }
    this.ticketTemplateList()
  },
  onShow: function () {
    // this.templateList()
  },
  methods: {
    //获取场馆泳票模板列表
    ticketTemplateList() {
      request('/common/ticket/template/list', {
        user_id: uni.getStorageSync('user_id'),
        site_code: this.site_code,
      })
        .then((res) => {
          this.template_id = res?.datas?.templates[0].template_id
          this.ticketTemplateInfo()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    ticketTemplateInfo() {
      request('/common/ticket/template/info', {
        template_id: this.template_id,
        with_session: 1,
      })
        .then((res) => {
          this.ticketInfo = res?.datas
          let result = JSON.parse(JSON.stringify(this.ticketInfo))
          result.start_date = result.start_date + ' 00:00:00'
          result.end_date = result.end_date + ' 00:00:00'
          this.monthNum =
            new Date(result.end_date).getMonth() -
            new Date(result.start_date).getMonth() +
            1

          if (
            new Date(result.end_date).getTime() >
              new Date(result.start_date).getTime() &&
            +result.ticket_times === 1
          ) {
            this.show = true
          }

          /* 场次 */
          this.sessions = JSON.parse(JSON.stringify(this.ticketInfo.sessions))
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 预约日历
    handleShowCalendar() {
      this.showCalenDar = true
    },

    // 日历关闭
    handleCalendarClose() {
      this.showCalenDar = false
    },

    // 日历选择
    handleConfirm(e) {
      this.showCalenDar = false
      this.specified_date = e[0]
    },
    /* 选择场次 */
    selectSessions(item) {
      console.log(item.ticket_price)
      this.session_id = item.session_id
      this.ticket_price = item.ticket_price
    },

    //支付 
    handleBuy() {
      request('/user/ticket/buy/wx', {
        session_id: this.session_id,
        specified_date: this.specified_date,
      })
        .then((res) => {
          console.log(res)
          uni.removeStorageSync('appId')
          uni.removeStorageSync('timeStamp')
          uni.removeStorageSync('nonceStr')
          uni.removeStorageSync('package')
          uni.removeStorageSync('signType')
          uni.removeStorageSync('paySign')
          uni.setStorageSync('appId', res?.datas?.appId || '')
          uni.setStorageSync('timeStamp', res?.datas?.timeStamp || '')
          uni.setStorageSync('nonceStr', res?.datas?.nonceStr || '')
          uni.setStorageSync('package', res?.datas?.package || '')
          uni.setStorageSync('signType', res?.datas?.signType || '')
          uni.setStorageSync('paySign', res?.datas?.paySign || '')

          this.fnWxPay()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    fnWxPay() {
      uni.requestPayment({
        timeStamp: uni.getStorageSync('timeStamp'), //时间戳
        nonceStr: uni.getStorageSync('nonceStr'), //随机字符串
        package: uni.getStorageSync('package'), //prepay_id
        signType: uni.getStorageSync('signType'), //签名算法MD5
        paySign: uni.getStorageSync('paySign'), //签名
        success(res) {
          console.log('支付：', res)
          if (res.errMsg == 'requestPayment:ok') {
            uni.showToast({
              title: '支付成功！',
              icon: 'success',
            })
          } else {
            uni.showToast({
              title: '支付失败！',
              icon: 'success',
            })
          }
        },
        fail(res) {
          uni.showToast({
            title: '支付失败！',
            icon: 'success',
          })
        },
      })
    },
  },
}
</script>

<style lang="less">
.detail-wrap {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  height: auto;
  padding-bottom: 100rpx;
  position: relative;
  box-sizing: border-box;
  background: #f7f7f8;
}

.swiper-wrap {
  width: 100%;
  height: 360rpx !important;
  box-sizing: border-box;
}

.titck-swiper {
  height: 100% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 更改u-swiper样式 */
::v-deep .u-swiper {
  height: 100% !important;
}

::v-deep .u-swiper__wrapper.data-v-6b019429 {
  height: 100% !important;
}

::v-deep .u-swiper__wrapper__item__wrapper__image.data-v-6b019429 {
  height: 100% !important;
}

::v-deep .u-swiper__indicator data-v-6b019429 {
  bottom: 40rpx !important;
}

::v-deep .u-swiper__indicator-dot {
  width: 58rpx !important;
  height: 58rpx !important;
}
/*  */
.price-floor {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: #333;
  background: #fff;
}
.price-floor .title {
  height: 80rpx;
  line-height: 80rpx;
}
.price-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  color: #333;
  font-size: 24rpx;
  box-sizing: border-box;
}

.price-box {
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #d5ad57;
}

.price-box .unit {
}
/*  */

.price-box .price {
  margin-left: 10rpx;
  font-size: 32rpx;
}

.times-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 17rpx 24rpx;
  background-color: #fff;
  margin-top: 20rpx;
}
.times-wrap .times-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sessions {
  margin-top: 20rpx;
  background: #fff;
}
.sessions-title {
  height: 60rpx;
  line-height: 60rpx;
}
.sessions-con {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}

.sessions-con .item {
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 15rpx;
}

.ticket-detail-title-desc {
  margin-top: 20rpx;
  color: #d5ad57;
}

.ticket-detail-comment-wrap {
  width: 100%;
  height: auto;
  background-color: #fff;
  font-size: 24rpx;
  padding: 10rpx 15rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}

.ticket-detail-comment-item {
  width: 100%;
  height: auto;
  margin-bottom: 10rpx;
}

.ticket-detail-btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #efefef;
}

.ticket-detail-btn {
  box-sizing: border-box;
  border: none;
  width: 90%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20rpx;
  color: #fff;
  font-size: 28rpx;
  font-weight: 400;
  background: linear-gradient(to right, #d5ad57, #cfb58a);
}
</style>
